<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>代理中心</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../css/index.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style type="text/css">
      body{-webkit-overflow-scrolling:touch;}
      html, body{overflow-x: hidden;}
      body{
        background: #ffffff;
      }
      .header{
        height: 1.76rem;
        position: relative;
        text-align: center;
        line-height: 1.76rem;
        font-size: 0.8rem;
        color: #666;
        margin-bottom: 0.26rem;
      }
      .header img{
        position: absolute;
        left: 0;
        top: 0;
        width: 2.03rem;
      }
      .content1{
        margin: 0 auto;
        margin-bottom: 0.93rem;
        width: 97%;
        height: 9.36rem;
        display: block;
        background: #f9dce4;
        border-radius: 10px;
        overflow: hidden;
        box-sizing: border-box;
        color: #666666;
        position: relative;
      }
      .user_message{
        margin-top: 1.06rem;
        display: flex;
        align-items: center;;
      }
      .user_message>img{
        width: 2.61rem;
        height: 2.61rem;
        border-radius: 50%;
        display: block;
        margin-left: 0.267rem;
        margin-right: 0.88rem
      }
      .user_message>div>div:nth-of-type(1){
        font-size: 1.04rem;
        display: flex;
        align-items: center;
      }
      .user_message>div>div:nth-of-type(1)>div{
        width: 1.41rem;
        height: 1.41rem;
        background: #fff;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 0.64rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .user_message>div>div:nth-of-type(1)>div img{
        width:0.96rem;
      }
      .user_message>div>div:nth-of-type(2){
        font-size: 0.64rem;
        margint-top: 0.4rem;
      }
      .content1_position{
        position: absolute;
        left: 0;
        bottom: 0.64rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .content1_position>div{
        flex: 1;
        text-align: center;
      }
      .content1_position>div p{
        font-size: 0.75rem;
      }
      hr{
        height: 2px;
        border: none;
        background: rgba(102,102,102,.4);
        width: 100%;
      }
      .tools{
        color: #666;
        margin-bottom: 1.73rem;
      }
      .tools>p{
        font-size: 0.85rem;
        margin-top: 1.17rem;
        margin-bottom:1.07rem;
        text-align: center;
      }
      .tools_list{
        font-size: 0.64rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 97%;
        margin: 0 auto;
        margin-top: 0.96rem;
      }
      .tools_list>div{
        flex: 1;
        display: flex;
        align-items: center;;
        justify-content: center;
        flex-direction: column;
      }
      .tools_list img{
        width: 1.97rem;
        height: 1.97rem;
        margin-bottom: 0.53rem;
      }
      .vip{
        width: 97%;
        margin: 0 auto 0.93rem auto;;
      }
      .vip>p{
        margin-top: 1.07rem;
        font-size: 0.85rem;
        text-align: center;
        margin-bottom: 0.93rem;
      }

      .circle2{
        transform-origin: 55px 55px;
        transform: rotate(-90deg);
        transition: stroke-dasharray .3s ease-in;
      }
      .start_vip{
        width: 97%;
        overflow: hidden;
        height: 9.33rem;
        box-sizing: border-box;
        box-shadow: rgba(102,102,102,.4) 0px 0px .62rem;
        border-radius: 10px;
        margin: 0 auto;
        margin-bottom: .4rem;
        color: #666;
      }
      .start_vip>p{
        margin-top: 1.07rem;
        font-size: 0.85rem;
        text-align: center;
        margin-bottom: 0.93rem;
      }
      .start_vip>div{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
      .start_vip>div>div{
        flex: 1;
        text-align: center;
        align-items: center;
        justify-content: center;
      }
      .start_vip>div>div img{
        height: 2.13rem;
        margin: 0 auto 0.8rem auto;
      }
      .start_vip>div>div p:nth-of-type(1){
        font-size: 0.8rem;
      }
      .start_vip>div>div p:nth-of-type(2){
        font-size: 0.53rem;
      }
    </style>
</head>
<body>
  <div class="header">
    <img src="../image/login/back.png" />代理中心
  </div>
  <div class="content1">
    <div class="user_message">
      <img src="../image/agencyCenter/userlogo.png" />
      <div>
        <div>Alison<div><img src="../image/agencyCenter/Vip.png" /></div></div>
        <div>188****8888</div>
      </div>
    </div>
    <div class="content1_position">
      <div>
        <p>¥ 111</p>
        <p>累计收入</p>
      </div>
      <div>
        <p>22</p>
        <p>累计订单</p>
      </div>
      <div>
        <p>333</p>
        <p>累计粉丝</p>
      </div>
    </div>
  </div>
  <hr />
  <div class="tools">
    <p>常用工具</p>
    <div class="tools_list">
      <div>
        <img src="../image/agencyCenter/icon1.png" />
        <p>粉丝订单</p>
      </div>
      <div>
        <img src="../image/agencyCenter/icon2.png" />
        <p>团队粉丝</p>
      </div>
      <div>
        <img src="../image/agencyCenter/icon3.png" />
        <p>收益统计</p>
      </div>
    </div>
    <div class="tools_list">
      <div>
        <img src="../image/agencyCenter/icon4.png" />
        <p>邀请分享</p>
      </div>
      <div>
        <img src="../image/agencyCenter/icon5.png" />
        <p>我的钱包</p>
      </div>
      <div>
        <img src="../image/agencyCenter/icon6.png" />
        <p>联系客服</p>
      </div>
    </div>
  </div>
  <hr />
  <div class="vip">
    <p>我的权益</p>
    <svg xmlns="http://www.w3.org/200/svg" height="150" width="110">
      <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round"/>
      <circle class="circle2" id="circle2" cx="55" cy="55" r="50" fill="none" stroke="red" stroke-width="5" stroke-dasharray="0,10000"/>
  </svg>
  </div>
  <div class="start_vip">
    <p>开通VIP，享更多权益</p>
    <div>
      <div>
        <img src="../image/agencyCenter/icon7.png" />
        <p>24小时</p>
        <p>专属客服</p>
      </div>
      <div>
        <img src="../image/agencyCenter/icon8.png" />
        <p>100元/月</p>
        <p>全品类券</p>
      </div>
      <div>
        <img src="../image/agencyCenter/icon9.png" />
        <p>5倍</p>
        <p>购物积分</p>
      </div>
      <div>
        <img src="../image/agencyCenter/icon10.png" />
        <p>神秘特权</p>
        <p>敬请期待</p>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/zepto.min.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript">
var circle2 =  document.querySelector("#circle2");
var circleData = 50;

var circleLength = Math.floor(2 * Math.PI * circle2.getAttribute("r"));

window.onload = rotateCircle;

btn2.onclick = rotateCircle;

function rotateCircle () {
    var val = parseFloat(circleData).toFixed(2);
    val = Math.max(0,val);
    val = Math.min(100,val);
    circle2.setAttribute("stroke-dasharray","" + circleLength * val / 100 + ",10000");
}
</script>
</html>
